<template>
  <div
    class="content"
    v-loading="loading"
    element-loading-text="登录中..."
    :element-loading-spinner="svg"
    element-loading-svg-view-box="-10, -10, 50, 50"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="login">
      <div class="avatar">
        <el-avatar
          :size="50"
          src="https://avatars.githubusercontent.com/u/57653565?v=4"
        ></el-avatar
        ><span>Vue3后台管理系统模板</span>
      </div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
        label-position="left"
        size="default"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" />
        </el-form-item>
        <el-form-item label="记住密码" prop="remember">
          <el-switch v-model="ruleForm.remember" />
        </el-form-item>
        <div class="submit">
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >登录</el-button
          >
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
// import type { FormInstance } from "element-plus";
import type { ElForm } from "element-plus";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;
const loading = ref(false);
const router = useRouter();
type ElFormInstance = InstanceType<typeof ElForm>;
const ruleFormRef = ref<ElFormInstance>();
const ruleForm = reactive({
  username: "Admin",
  password: "",
  remember: true,
});

const rules = reactive({
  username: [
    { required: true, message: "Please input username", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  password: [
    { required: true, message: "Please input password", trigger: "blur" },
    { min: 6, max: 18, message: "password is 123456", trigger: "blur" },
  ],
});

const submitForm = async (formEl: ElFormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      loading.value = true;
      setTimeout(() => {
        if (ruleForm.username === "Admin" && ruleForm.password === "123456") {
          loading.value = false;
          localStorage.setItem("token", "123456");
          router.push("/");
          setTimeout(() => {
            ElMessage.warning("token失效，请重新登录");
            localStorage.removeItem("token");
          }, 30 * 60 * 1000);
        } else {
          loading.value = false;
          localStorage.clear();
          ElMessage.error("用户名或者密码错误");
        }
      }, 1000);
    } else {
      console.log("error submit!");
    }
  });
};

const resetForm = (formEl: ElFormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login {
    width: 300px;
    height: 240px;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid #ccc;
  }
  .avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    .el-avatar {
      margin-right: 10px;
    }
    .el-avatar__text {
      font-size: 18px;
    }
  }
  .submit {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
